<template>
  <div class="dashboard">
    <h1>中医文化可视化</h1>

    <div class="stats-summary">
      <div class="stat-card" v-for="stat in summaryStats" :key="stat.title">
        <div class="stat-value">{{ stat.value }}</div>
        <div class="stat-title">{{ stat.title }}</div>
        <div class="stat-change" :class="{'positive': stat.change > 0, 'negative': stat.change < 0}">
          <i :class="stat.change > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
          {{ stat.change > 0 ? '+' : '' }}{{ stat.change }}%
        </div>
      </div>
    </div>

    <div class="charts-row">
      <div class="chart-container">
        <h3>中医流派分布</h3>
        <div class="chart" ref="pieChart"></div>
      </div>
      <div class="chart-container">
        <h3>中医典籍时间轴</h3>
        <div class="chart" ref="timelineChart"></div>
      </div>
    </div>

    <div class="charts-row">
      <div class="chart-container">
        <h3>中药材特性分析</h3>
        <div class="chart" ref="radarChart"></div>
      </div>
      <div class="chart-container">
        <h3>中医文化热度趋势</h3>
        <div class="chart" ref="lineChart"></div>
      </div>
    </div>

    <div class="full-width-chart">
      <h3>中医文化知识图谱</h3>
      <div class="chart" ref="graphChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/theme/macarons';

export default {
  name: 'TCMCultureVisualization',
  data() {
    return {
      summaryStats: [
        { title: '中医典籍数量', value: '856', change: 2.5 },
        { title: '中药种类', value: '12,836', change: 1.8 },
        { title: '流派传承', value: '6大主流', change: 0.5 },
        { title: '文化影响力指数', value: '89.2', change: 3.2 }
      ],
      tcmSchools: [
        { name: '伤寒派', feature: '以六经辨证论治外感病', representative: '张仲景', color: '#5470C6' },
        { name: '温病派', feature: '注重温热病治疗，创立卫气营血辨证', representative: '叶天士', color: '#91CC75' },
        { name: '滋阴派', feature: '强调滋阴降火，注重人体阴液', representative: '朱丹溪', color: '#FAC858' },
        { name: '补土派', feature: '重视脾胃，认为脾胃为后天之本', representative: '李东垣', color: '#EE6666' },
        { name: '寒凉派', feature: '多用寒凉药物治疗火热病证', representative: '刘完素', color: '#73C0DE' },
        { name: '攻邪派', feature: '主张以攻邪治病，反对滥用补法', representative: '张从正', color: '#3BA272' }
      ],
      classicWorks: [
        { name: '黄帝内经', time: '战国至秦汉', influence: 95, type: '理论奠基' },
        { name: '伤寒杂病论', time: '东汉', influence: 90, type: '临床经典' },
        { name: '神农本草经', time: '东汉', influence: 85, type: '药学经典' },
        { name: '千金要方', time: '唐代', influence: 80, type: '方剂大全' },
        { name: '本草纲目', time: '明代', influence: 88, type: '药学巨著' }
      ],
      herbsAnalysis: {
        indicators: [
          { name: '药用价值', max: 100 },
          { name: '安全性', max: 100 },
          { name: '普及度', max: 100 },
          { name: '研究深度', max: 100 },
          { name: '配伍价值', max: 100 }
        ],
        data: [
          {
            name: '常用药材',
            values: [85, 90, 95, 80, 75],
            color: '#5470C6'
          },
          {
            name: '珍稀药材',
            values: [95, 70, 60, 85, 90],
            color: '#EE6666'
          }
        ]
      },
      cultureTrends: {
        years: ['2018', '2019', '2020', '2021', '2022', '2023'],
        data: [
          {
            name: '学术研究',
            values: [45, 52, 65, 72, 80, 85],
            color: '#5470C6'
          },
          {
            name: '临床应用',
            values: [60, 65, 70, 75, 78, 82],
            color: '#91CC75'
          },
          {
            name: '文化传播',
            values: [30, 42, 55, 68, 75, 88],
            color: '#EE6666'
          }
        ]
      },
      knowledgeGraph: {
        nodes: [
          { id: 1, name: '阴阳五行', category: 0, symbolSize: 50 },
          { id: 2, name: '辨证论治', category: 0, symbolSize: 45 },
          { id: 3, name: '经络腧穴', category: 0, symbolSize: 40 },
          { id: 4, name: '中药方剂', category: 1, symbolSize: 48 },
          { id: 5, name: '四气五味', category: 1, symbolSize: 42 },
          { id: 6, name: '君臣佐使', category: 1, symbolSize: 38 },
          { id: 7, name: '黄帝内经', category: 2, symbolSize: 52 },
          { id: 8, name: '伤寒论', category: 2, symbolSize: 46 },
          { id: 9, name: '本草纲目', category: 2, symbolSize: 44 }
        ],
        links: [
          { source: '阴阳五行', target: '辨证论治', value: 8 },
          { source: '阴阳五行', target: '四气五味', value: 7 },
          { source: '辨证论治', target: '君臣佐使', value: 6 },
          { source: '经络腧穴', target: '黄帝内经', value: 5 },
          { source: '中药方剂', target: '四气五味', value: 7 },
          { source: '中药方剂', target: '伤寒论', value: 6 },
          { source: '黄帝内经', target: '伤寒论', value: 8 },
          { source: '黄帝内经', target: '本草纲目', value: 7 },
          { source: '四气五味', target: '本草纲目', value: 6 }
        ],
        categories: [
          { name: '理论基础' },
          { name: '药物理论' },
          { name: '经典著作' }
        ]
      }
    };
  },
  mounted() {
    this.initCharts();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initCharts() {
      this.initPieChart();
      this.initTimelineChart();
      this.initRadarChart();
      this.initLineChart();
      this.initGraphChart();
    },
    
    initPieChart() {
      const chart = echarts.init(this.$refs.pieChart, 'macarons');
      chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: params => {
            const school = this.tcmSchools.find(s => s.name === params.name);
            return `
              <strong>${params.name}</strong><br/>
              特色: ${school.feature}<br/>
              代表人物: ${school.representative}<br/>
              占比: ${params.percent}%
            `;
          }
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: this.tcmSchools.map(s => s.name)
        },
        series: [{
          name: '中医流派',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 8,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 18,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: this.tcmSchools.map(school => ({
            value: Math.floor(Math.random() * 200) + 50,
            name: school.name,
            itemStyle: { color: school.color }
          }))
        }]
      });
      this.pieChart = chart;
    },
    
    initTimelineChart() {
      const chart = echarts.init(this.$refs.timelineChart, 'macarons');
      chart.setOption({
        tooltip: {
          trigger: 'axis',
          formatter: params => {
            const data = params[0].data;
            return `
              <strong>${data.name}</strong><br/>
              时期: ${data.time}<br/>
              类型: ${data.type}<br/>
              影响力指数: ${data.influence}
            `;
          }
        },
        xAxis: {
          type: 'category',
          data: this.classicWorks.map(w => w.name),
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value',
          name: '影响力指数'
        },
        series: [{
          name: '影响力',
          type: 'bar',
          data: this.classicWorks.map(w => ({
            value: w.influence,
            name: w.name,
            time: w.time,
            type: w.type
          })),
          itemStyle: {
            color: params => {
              const colors = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'];
              return colors[params.dataIndex % colors.length];
            }
          },
          label: {
            show: true,
            position: 'top',
            formatter: '{c}'
          }
        }]
      });
      this.timelineChart = chart;
    },
    
    initRadarChart() {
      const chart = echarts.init(this.$refs.radarChart, 'macarons');
      chart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: this.herbsAnalysis.data.map(item => item.name)
        },
        radar: {
          indicator: this.herbsAnalysis.indicators,
          radius: '65%',
          splitNumber: 4,
          axisName: {
            color: '#333'
          },
          splitArea: {
            areaStyle: {
              color: ['rgba(255, 255, 255, 0.5)']
            }
          }
        },
        series: [{
          type: 'radar',
          data: this.herbsAnalysis.data.map(item => ({
            value: item.values,
            name: item.name,
            areaStyle: {
              opacity: 0.2,
              color: item.color
            },
            lineStyle: {
              color: item.color,
              width: 2
            },
            symbolSize: 6
          }))
        }]
      });
      this.radarChart = chart;
    },
    
    initLineChart() {
      const chart = echarts.init(this.$refs.lineChart, 'macarons');
      chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.cultureTrends.data.map(item => item.name)
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.cultureTrends.years
        },
        yAxis: {
          type: 'value',
          name: '热度指数'
        },
        series: this.cultureTrends.data.map(item => ({
          name: item.name,
          type: 'line',
          data: item.values,
          smooth: true,
          lineStyle: {
            color: item.color,
            width: 3
          },
          itemStyle: {
            color: item.color
          },
          symbolSize: 8
        }))
      });
      this.lineChart = chart;
    },
    
    initGraphChart() {
      const chart = echarts.init(this.$refs.graphChart, 'macarons');
      chart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: this.knowledgeGraph.categories.map(c => c.name),
          top: 'top'
        },
        series: [{
          name: '中医知识图谱',
          type: 'graph',
          layout: 'force',
          data: this.knowledgeGraph.nodes,
          links: this.knowledgeGraph.links,
          categories: this.knowledgeGraph.categories,
          roam: true,
          label: {
            show: true,
            position: 'right'
          },
          force: {
            repulsion: 100,
            edgeLength: [50, 150]
          },
          lineStyle: {
            width: 1.5,
            curveness: 0.2
          },
          emphasis: {
            focus: 'adjacency',
            lineStyle: {
              width: 2.5
            }
          }
        }]
      });
      this.graphChart = chart;
    },
    
    handleResize() {
      [this.pieChart, this.timelineChart, this.radarChart, this.lineChart, this.graphChart].forEach(chart => {
        chart && chart.resize();
      });
    }
  }
};
</script>

<style scoped>
.dashboard {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  margin-left: 220px;
  margin-top: 60px;
}

h1 {
  color: #1a6f50;
  text-align: center;
  margin: 20px 0 30px;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 1px;
}

.stats-summary {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 15px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  flex: 1;
  min-width: 200px;
  transition: all 0.3s ease;
  border-left: 4px solid #1a6f50;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #1a6f50;
  margin-bottom: 5px;
}

.stat-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.stat-change {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-change.positive {
  color: #52c41a;
}

.stat-change.negative {
  color: #f5222d;
}

.charts-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
}

.chart-container {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  flex: 1;
  height: 400px;
  transition: all 0.3s ease;
}

.chart-container:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.chart-container h3 {
  margin: 0 0 15px;
  color: #1a6f50;
  font-size: 16px;
  font-weight: 600;
  padding-left: 10px;
  border-left: 3px solid #1a6f50;
}

.chart {
  width: 100%;
  height: calc(100% - 30px);
}

.full-width-chart {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  width: 100%;
  height: 500px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.full-width-chart:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.full-width-chart h3 {
  margin: 0 0 15px;
  color: #1a6f50;
  font-size: 16px;
  font-weight: 600;
  padding-left: 10px;
  border-left: 3px solid #1a6f50;
}

@media (max-width: 992px) {
  .charts-row {
    flex-direction: column;
  }
  
  .stat-card {
    min-width: calc(50% - 15px);
  }
  
  .dashboard {
    margin-left: 0;
    padding-top: 80px;
  }
}

@media (max-width: 768px) {
  .stats-summary {
    flex-direction: column;
  }
  
  .stat-card {
    width: 100%;
  }
  
  .chart-container, .full-width-chart {
    height: 350px;
  }
}
</style>